<template>
    <div>
        <div class="nickname">
            <label>用户名：</label>
            <a-input v-model="nickname" size="large" placeholder="请输入用户名" allow-clear></a-input>
        </div>
        <div class="password">
            <label>密码：</label>
            <a-input v-model="password" type="password" size="large" placeholder="请输入密码" allow-clear></a-input>
        </div>
        <div class="login">
            <a-button size="large" type="primary" style="width:100%" @click="submit">注册</a-button>
        </div>
    </div>
</template>

<script>
import { Input, Button,message } from "ant-design-vue";
import { regist } from "@/api/index.js";

export default {
    components: {
        "a-input": Input,
        "a-button": Button,
    },
    data() {
        return {
            nickname: "",
            password: "",
        };
    },
    methods: {
        submit() {
          if(!this.nickname || !this.password) return
          regist({
            nickName:this.nickname,
            password:this.password
          }).then(res=>{
            console.log(res);
            if(res.data.code===0){
              message.success('恭喜您注册成功！')
              this.$router.go(-1)
            }else{
              message.warning(res.data.msg || '登陆失败')
            }
          })
        },
    },
};
</script>

<style scoped>
.nickname {
    width: 80%;
    margin: 0 auto;
    padding-top: 100px;
}
.password,
.login {
    width: 80%;
    margin: 20px auto;
}
.tip{
  width: 80%;
  padding: 10px;
  margin: 20px auto;
  color: rgb(56, 54, 54);
  font-size: 16px;
}
</style>